<template>
    <div class="floating-ball-wrapper">
        <el-tooltip placement="top">
            <template v-slot:content>

                需要客服支持，请联系邮箱：<span style="color: #53a8ff;cursor: pointer;"
                    @click="copyText">labcore@aliyun.com</span>，承诺6小时内回复
            </template>
            <div class=" floating-ball">
                <el-icon :size="20">
                    <Avatar />
                </el-icon>

            </div>
        </el-tooltip>
    </div>
</template>
<script setup>
import { ElMessage } from 'element-plus';

const openEmailClient = () => {
    const email = 'support@example.com'; // 替换为你的邮件地址
    const subject = encodeURIComponent('客户支持请求'); // 替换为你的邮件主题
    const body = encodeURIComponent('您好，我需要帮助。'); // 替换为你的邮件内容
    window.location.href = `mailto:${email}?subject=${subject}&body=${body}`;
}

const copyText = () => {
    const textToCopy = 'labcore@aliyun.com'; // 你希望复制的文本内容
    navigator.clipboard.writeText(textToCopy).then(() => {
        ElMessage.success('文本已复制到剪贴板！');
    }).catch(err => {
        console.error('复制失败:', err);
    });
}
</script>
<style scoped>
.floating-ball-wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
}

.floating-ball {
    cursor: pointer;
    width: 50px;
    height: 50px;
    background-color: #409EFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: opacity 0.3s;
    opacity: 0.2;
}

.floating-ball:hover {
    opacity: 1;
}

.el-icon {
    color: white;
    font-size: 24px;
}
</style>